<template>
  <div class="listSort">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="list-item"
      v-drag>
      <InputNumber v-model="list[index]" :min="1" :label="String(list[index])"></InputNumber>
      排名：{{ item }}
    </div>
  </div>
</template>

<script>
import { InputNumber } from 'element-ui';
export default {
  components: {InputNumber},
  data() {
    return {
      list: [
        1,2,3,4,5,6,7,
      ],
      origin: {
        x: 0,
        y: 0,
      },
      listTrans: [],
    }
  },
  watch: {
    list: {
      handler() {
        const sort = this.list.toSorted((a, b) => a - b)
        this.$el.querySelectorAll('.list-item').forEach((item, ind) => {
          const index = sort.findIndex(i => i == this.list[ind])
          sort[index] = null
          item.style.transform = `translate(${this.listTrans[index][0]}px, ${this.listTrans[index][1]}px)`
          item.style.position = 'absolute'
        })
      }
    }
  },
  mounted() {
    const { x, y } = this.$el.querySelector('.list-item').getBoundingClientRect()
    this.origin.x = x
    this.origin.y = y
    this.$el.querySelectorAll('.list-item').forEach((item, index) => {
      const { x, y } = item.getBoundingClientRect()
      this.listTrans[index] = [x - this.origin.x, y - this.origin.y]
      item.style.transform = `translate(${this.listTrans[index][0]}px, ${this.listTrans[index][1]}px)`
    })
  },
}
</script>

<style leng="less" scoped>
.listSort {
  margin: 50px 200px;
  border: 1px solid #ccc;
  display: flex;
  flex-flow: column wrap;
  position: relative;
  height: 259px;
  width: 1300px;
  gap: 10px;
  & > .list-item {
    padding: 0 20px;
    height: 60px;
    line-height: 60px;
    border-radius: 5px;
    background-color: aqua;
    width: 300px;
    transition: all 1s;
  }
}
</style>